<template>
  <div class="container" :style="{marginTop:margintop+'rem'}">
    <div class="inputContainerView">
      <span class="titleView">{{title}}</span>
      <div class="inputView_bg">
        <input type="text" class="inputView" :placeholder="placeHolder" v-model="inputString" @blur="blur" @focus="focus" @input="input"
               @keydown="keydown">
        <transition name="errViewFade">
          <div class="errView errView-ani" :class="" v-show="isErrorShow">{{errmsg}}</div>
        </transition>
      </div>
      <button class="self-button" @click="rightBtnClick">{{rightTitle}}
        <slot></slot>
      </button>
    </div>
    <div class="line"></div>

  </div>
</template>

<script>


const phoneReg = /^[1][0-9]{10}$/ //手机号
const loginpwdReg = /^[a-zA-Z0-9]{6,12}$/ //6-12位字母数字登陆密码
const cardNumReg = /^[0-9]{16,19}$/ //16-19位卡号
const bankcardNumReg = /^[0-9]{10,25}$/ //10-25位银行卡号
const payPwdReg = /^[0-9]{6}$/ //6为数字密码
const smsReg = /^[0-9]{6}$/ //6为数字短信码
const hzReg = /^[\u4e00-\u9fa5]{2,6}$/ //汉字2-6个
const codePwdReg = /^[0-9a-zA-A]{16}$/ // 16位字母数字
const serial16Reg = /^[0-9]{16}$/ // 16位数字序列号

export default {
  name: 'baseInputView',
  props: {
    title: String, // 组件左侧标题文字
    placeHolder: String, // 组件默认提示文字
    rightTitle: String, // 组件右侧按钮文字
    errmsg: String,// 组件输入有误提示文字
    tag: String, // 组件tagcardNum
    margintop: String, //距离顶部的外边距
    inputType: String, // phone , loginpwd, cardNum,bankcardNum, payPwd, sms,hz,codePwd,serial16
    isSpace: {type: Boolean, default: false}, // 是否开启间隔模式(默认四位间隔,默认关闭)
    spaceItem: {type: Number, default: 4}, //设置间隔位数, 默认4位(仅isSpace===true时生效)
  },
  data () {
    return {
      inputString: '', // 输入的文字
      isErrorShow: false,
    }
  },
  computed: {},
  methods: {
    /*右侧按钮点击回调*/
    rightBtnClick () {
      this.$emit('rightBtnCallBack', this.tag)
    },
    /*监测输入框聚焦*/
    focus () {
    },
    /*监控实时输入1 - input方式*/
    input (a) {
      // this.inputString = this.inputString.replace(/\D/g, '').replace(/....(?!$)/g, '$& '); //替换空格前4位数字为4位数字加空格
      // console.log('inputString====>' + this.inputString)
      // console.log(this.inputString.length)

      /*启动分隔*/
      if (this.isSpace) {
        this.inputString = this.inputString.replace(/\W/g, '').replace(/....(?!$)/g, '$& ')
      }

      // 需要实时返回的
      // 1输入手机号码, 当满足10位,不满足11位时,返回外部,便于外部修改其他组件的样式
      if (this.inputType==='phone') {
        if (this.inputString.length ===11){
          this.checkInputStringWithOutSpaceChat()
        }else{
          this.$emit('textErrCallBack',this.inputString,this.tag);
        }
      }

    },
    /*监控实时输入2 - keydown方式 - 限制输入框输入长度*/
    keydown (e) {

      let maxLength = 0 //定义最大允许输入长度
      let spaceCount = 0 //定义间隔符的数量
      if (this.inputType === 'phone') {
        maxLength = 11
      }
      if (this.inputType === 'loginpwd') {
        maxLength = 12
      }
      if (this.inputType === 'cardNum') {
        maxLength = 19
      }
      if (this.inputType === 'bankcardNum') {
        maxLength = 25
      }
      if (this.inputType === 'payPwd') {
        maxLength = 6
      }
      if (this.inputType === 'sms') {
        maxLength = 6
      }
      if (this.inputType === 'hz') {
        maxLength = 6
      }
      if (this.inputType === 'codePwd') {
        maxLength = 16
      }
      if (this.inputType === 'serial16') {
        maxLength = 16
      }

      /*计算间隔字符的数量*/
      spaceCount = this.computeSpaceCount(maxLength, this.spaceItem)
      /*限制可输入的最大长度位*/
      e.target.value = e.target.value.slice(0, (maxLength - 1) + spaceCount)
    },
    /*监测输入框失焦 - 验证正则*/
    blur () {
      this.checkInputStringWithOutSpaceChat()
    },


    /**************************************** tool方法 ****************************************/

    /*验证最后输入数据并触发返回*/
    checkInputStringWithOutSpaceChat(){
      if (this.inputString.length === 0) return

      let inputString = this.inputString
      inputString = inputString.replace(/\s/g, '') //返回结果去除 间隔符


      if (this.inputType === 'phone') {
        if (!phoneReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'loginpwd') {
        if (!loginpwdReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'cardNum') {
        if (!cardNumReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'bankcardNum') {
        if (!bankcardNumReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'payPwd') {
        if (!payPwdReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'sms') {
        if (!smsReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'hz') {
        if (!hzReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'codePwd') {
        if (!codePwdReg.test(inputString)) return this.errAnimationShow()
      }
      if (this.inputType === 'serial16') {
        if (!serial16Reg.test(inputString)) return this.errAnimationShow()
      }

      this.$emit('textCallBack', inputString, this.tag) // 输入正确的字符后,执行回调
    },


    /*计算间隔数量
    * 当开启间隔,间隔字符数>0
    * 当不开启间隔, 间隔字符数===0
    * */
    computeSpaceCount (maxLength, spaceItem) {
      if (this.isSpace) {
        let spaceCount = 0
        if (maxLength % spaceItem > 0) {
          spaceCount = parseInt((maxLength / spaceItem), 10)
        } else {
          spaceCount = (maxLength / spaceItem) - 1
        }
        return spaceCount
      } else {
        return 0
      }
    },

    /*启动错误动画*/
    errAnimationShow () {
      this.isErrorShow = true
      this.$emit('textCallBack','', this.tag) // 反馈空字符串
      let timmer = setTimeout(() => {
        this.isErrorShow = false
        this.inputString = ''
        clearTimeout(timmer)
      }, 1500)
    },
  },

}
</script>

<style scoped lang="less">
  @lineHeight: 0.45rem;
  .container {
    background-color: #fff;
    width: 3.75rem;
    height: @lineHeight;
    position: relative;
    .inputContainerView {
      width: 3.75rem;
      height: @lineHeight;
      font-size: 0;
      overflow: hidden;
      .titleView {
        margin: auto;
        margin-left: 0.14rem;
        margin-right: 0.08rem;
        height: @lineHeight;
        line-height: @lineHeight;
        display: inline-block;
        font-size: 0.17rem;
      }
      .inputView_bg {
        display: inline-block;
        height: @lineHeight;
        background-color: transparent;
        .inputView {
          display: inline-block;
          height: @lineHeight;
          font-size: 0.17rem;
        }
        .errView {
          color: red;
          font-size: 0.12rem;
          position: absolute;
          bottom: 0;
          line-height: 0.12rem;
        }
        .errViewFade-enter, .errViewFade-leave-to {
          opacity: 0;
        }
        .errViewFade-enter-to, .errViewFade-leave {
          opacity: 1;
        }
        .errViewFade-enter-active, .errViewFade-leave-active {
          transition: opacity 400ms ease-in;
        }
        .errView-ani {
          animation: errorAnimation 300ms ease-in-out 0s infinite alternate;
        }
      }

      .self-button {
        height: @lineHeight;
        line-height: @lineHeight;
        border-width: 0;
        float: right;
        text-align: right;
        right: 0.14rem;
        position: absolute;
        background-color: white;
        font-size: 0.15rem;
        color: #3968FF;
        padding: 0;
        outline: none;
      }
    }
    .line {
      background-color: rgba(153, 153, 153, 0.5);
      width: calc(100% - 0.14rem);
      margin-left: 0.14rem;
      height: 0.01rem;
      position: absolute;
      bottom: 0;
    }
  }

  /*css动画*/
  @keyframes errorAnimation {
    0% {
      margin-left: 0.1rem;
    }
    100% {
      margin-left: -0.06rem;
    }
  }


</style>
